<template>
    <el-row>
        <el-col :span="24" class="oneSpace">
            <div class="oneInnerSpace">
                <el-row>
                    <el-col :span="24"><el-text class="highShow">LEVEL：{{ currentItem.currentLevel }}</el-text></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-row v-if="currentItem.sourceType != 'core'">
                            <el-col :span="2">字段名称：</el-col>
                            <el-col :span="4"><el-input v-model="fieldName" placeholder="Please input" /></el-col>
                            <el-col :span="2">字段描述：</el-col>
                            <el-col :span="4"><el-input v-model="fieldDesc" placeholder="Please input" /></el-col>
                            <el-col :span="2">表名：</el-col>
                            <el-col :span="4"><el-input v-model="tableName" placeholder="Please input" /></el-col>
                            <el-col :span="2">数据库名：</el-col>
                            <el-col :span="4"><el-input v-model="databaseName" placeholder="Please input" /></el-col>
                        </el-row>
                        <el-row style="margin-top: 5px">
                            <el-col :span="3" v-if="currentItem.sourceType != 'core'"><el-button type="primary"
                                    @click="searchDataField" :loading="loading">查询</el-button></el-col>
                            <el-col :span="5"><el-button type="primary"
                                    @click="linkToOtherDataField">与字段关联</el-button></el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-table :data="tableData" style="width: 100%" @row-click="selectDataField">
                            <el-table-column prop="fieldName" label="字段名称">
                            </el-table-column>
                            <el-table-column prop="fieldDesc" label="字段描述">
                            </el-table-column>
                            <el-table-column prop="fieldType" label="字段类型">
                            </el-table-column>
                            <el-table-column prop="tableName" label="表名">
                            </el-table-column>
                            <el-table-column prop="databaseName" label="数据库名">
                            </el-table-column>
                            <el-table-column prop="databaseType" label="数据库类型">
                            </el-table-column>
                            <el-table-column prop="databaseDesc" label="数据库类型">
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>

    <!-- 选择关联数据库字段的抽屉 -->
    <el-drawer v-model="linkToDataFieldDrawer" direction="btt" size="65%">
        <template #default>
            <el-row>
                <el-col :span="24">
                    <el-radio v-model="linkType" label="to" size="large">由此字段衍生</el-radio>
                    <el-radio v-model="linkType" label="from" size="large">此字段的来源</el-radio>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="tableDataForLink" style="width: 100%" highlight-current-row
                        @row-click="selectLinkDataField">
                        <el-table-column prop="fieldName" label="字段名称">
                        </el-table-column>
                        <el-table-column prop="fieldDesc" label="字段描述">
                        </el-table-column>
                        <el-table-column prop="fieldType" label="字段类型">
                        </el-table-column>
                        <el-table-column prop="tableName" label="表名">
                        </el-table-column>
                        <el-table-column prop="databaseName" label="数据库名">
                        </el-table-column>
                        <el-table-column prop="databaseType" label="数据库类型">
                        </el-table-column>
                        <el-table-column prop="databaseDesc" label="数据库类型">
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="linkToDataFieldDrawer = false">取消</el-button>
                <el-button type="primary" @click="doLinkToDataField">关联</el-button>
            </div>
        </template>
    </el-drawer>
</template>
  
<script>
// import { ref } from 'vue'
import axios from 'axios'
import { ElNotification, ElMessage } from 'element-plus'

export default {
    name: 'LinkFieldModule',
    props: ['currentItem', 'currentSelectedDataField'],
    data() {
        return {
            loading: false,
            linkToDataFieldDrawer: false,
            linkType: "to",

            tableData: [],
            tableDataForLink: [],
            fieldName: "",
            fieldDesc: "",
            tableName: "",
            databaseName: "",
            currentSelectdDataFieldId: "",

            willLinkDataFieldId: ""
        }
    },
    mounted() {
        this.tableData = this.currentItem.sourceDataField
    },
    watch: {
        linkType() {
            this.getDataFieldsForLink()
        },
        currentItem(n) {
            if (n.sourceType == 'core') {
                this.tableData = n.sourceDataField
            }
        }
    },
    methods: {
        linkToOtherDataField() {
            console.log(this.currentSelectedDataField)
            if (!this.currentSelectdDataFieldId) {
                ElMessage('请选择一条要被关联的数据库字段')
                return
            } else {
                if (this.currentSelectedDataField.levelName == this.currentItem.currentLevel) {
                    this.willLinkDataFieldId = ""
                    this.linkToDataFieldDrawer = true
                    this.getDataFieldsForLink()
                } else {
                    ElMessage({
                        message: '当前被选中数据字段不属于本Level',
                        type: 'warning',
                    })
                }
            }
        },
        doLinkToDataField() {
            if (!this.willLinkDataFieldId) {
                ElMessage("请选择一条数据")
            }
            axios.get("/easy_metadata/link/field/add", {
                params: {
                    "fromId": 'from' == this.linkType ? this.willLinkDataFieldId : this.currentSelectdDataFieldId,
                    "toId": 'to' == this.linkType ? this.willLinkDataFieldId : this.currentSelectdDataFieldId
                }
            })
                .then(response => {
                    if (response.data.data) {
                        this.linkToDataFieldDrawer = false
                        ElMessage("关联成功")
                    } else {
                        ElMessage("字段关联关系已存在或会成环，无法建立此关联关系")
                    }
                })
                .catch(error => {
                    this.loading = false;
                    console.log(error)
                    ElNotification({
                        title: '保存失败',
                        message: '发生异常，保存失败',
                        type: 'error',
                    })
                })
        },

        // 查询数据库字段信息
        getDataFields() {
            this.loading = true;
            axios.post('/easy_metadata/data_field/list', {
                "fieldName": this.fieldName,
                "fieldDesc": this.fieldDesc,
                "tableName": this.tableName,
                "databaseName": this.databaseName,
                "linkType": this.currentItem.sourceType,
                "linkFieldId": this.currentItem.sourceField.id
            })
                .then(response => {
                    this.loading = false;
                    this.tableData = response.data.data.records
                })
                .catch(error => {
                    this.loading = false;
                    console.log(error)
                })
        },
        getDataFieldsForLink() {
            this.loading = true;
            axios.post('/easy_metadata/link/field/linkable', {
                "fieldId": this.currentSelectdDataFieldId,
                "fieldName": this.fieldName,
                "fieldDesc": this.fieldDesc,
                "tableName": this.tableName,
                "databaseName": this.databaseName,
                "linkType": this.linkType
            })
                .then(response => {
                    this.loading = false;
                    this.tableDataForLink = response.data.data
                })
                .catch(error => {
                    this.loading = false;
                    console.log(error)
                })
        },
        searchDataField() {
            this.getDataFields();
        },
        // 此方法还有第二个参数：之前被选中的值
        selectDataField(currentSelectd) {
            if (currentSelectd) {
                // 选中一个字段时，通知父组件当前被选中的字段
                this.$emit('selectOneDataField', { "selectd": currentSelectd, "levelName": this.currentItem.currentLevel })
                this.currentSelectdDataFieldId = currentSelectd.id
            }
        },
        // 此方法还有第二个参数：之前被选中的值
        selectLinkDataField(currentSelectd) {
            if (currentSelectd) {
                this.willLinkDataFieldId = currentSelectd.id;
            } else {
                this.willLinkDataFieldId = "";
            }
        }
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.oneSpace {
    border: 1px solid var(--el-border-color);
}

.oneInnerSpace {
    width: 98%;
    margin: 0 auto;
}

.oneSpaceTitle {
    width: 100%;
    text-align: center;
    margin-bottom: 9px;
}

.el-row {
    margin-top: 2px;
    margin-bottom: 2px;
}
</style>
  